<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>咨询系统</el-breadcrumb-item>
			<el-breadcrumb-item>分量设置</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<!-- 表单 -->
			<el-form :inline="true" v-bind:model="formInline" class="demo-form-inline">
				<el-form-item label="名称">
					<el-input v-model="formInline.UserName" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" round>搜索</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格 -->
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="Id" label="编号">
				</el-table-column>
				<el-table-column prop="UserName" label="名称">
				</el-table-column>
				<el-table-column prop="Weight" label="权重">
				</el-table-column>
				<el-table-column label="操作">
					<template  slot-scope="scope">
						<el-button icon="el-icon-setting" size="mini" type="primary" @click="show(scope.row)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			 :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper " :total="count">
			</el-pagination>
		</el-card>
		<el-dialog
		  title="编辑"
		  :visible.sync="dialogVisible"
		  width="50%">
		  <el-form ref="form" :model="form" label-width="80px">
		    <el-form-item label="用户名称">
		      <el-input v-model="form.UserName" :disabled="true"></el-input>
		    </el-form-item>
			<el-form-item label="权重">
			  <el-input v-model="form.Weight"></el-input>
			</el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="Edit()">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formInline:{
					UserName:""
				},
				page:1,
				limit:5,
				count:0,
				tableData:[],
				dialogVisible:false,
				form:{}
			}
		},
		created() {
			this.getTableList()
		},
		methods: {
			async Edit(){
				const {
					data: res
				} = await this.$http.post('api/ZiXun/Edit',this.form)
				if (res.code == -1) {
					this.$message.error(res.msg)
				}
				this.$message.success(res.msg);
				this.dialogVisible = false;
				this.getTableList();
			},
			show(row){
				this.form=row;
				this.dialogVisible=true
			},
			async getTableList() {
				const {
					data: res
				} = await this.$http.get('api/ZiXun/GetList', {
					params: {
						page: this.page,
						limit: this.limit,
						UserName: this.formInline.UserName
					}
				})
				this.count = res.count;
				this.tableData = res.data;
			},
			handleSizeChange(val) {
				this.limit = val;
				this.getTableList()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getTableList()
			},
			onSubmit(){
				this.getTableList()
			}
		}
	}
</script>

<style>
	.el-dialog{
		width: 100%;
	}
</style>
